<template>
  <el-dialog
    ref="refDlg"
    title="附件修改"
    :visible.sync="dialogShow"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="clearForm"
    width="700px"
    @close="closeDialog"
  >
    <div>
      <el-button type="primary" size="small" @click="handleAdd()">新增</el-button>
      <file-detail :is-edit="true" style="margin-top:10px" :file-data="fileList" @success="getFile" />

    </div>
    <add-file v-if="showFileAdd" ref="formDlg" :att-type-options="attTypeOptions" :visible.sync="showFileAdd" @success="onSuccess" />

    <div slot="footer">
      <el-button size="mini" @click="closeDialog">取消</el-button>
      <el-button size="mini" type="primary" @click="submitForm">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import fileDetail from './fileDetail.vue'
import { postConfigAttachmentTemplate, saveState } from '@/api/shopMap'
import { getShopAttachment } from '@/api/common.js'
import addFile from './fileAddDlg.vue'

export default {
  name: 'FileEditForm',
  components: { fileDetail, addFile },
  props: {
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    rowData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      fileTypeName: '',
      fileList: [],
      showFileAdd: false,
      attTypeOptions: [], // 附件类型
      formData: [],
      formRules: {
        attachmentTypeId: [
          { required: true, message: '请选择附件类型', trigger: 'change' }
        ]
      }
    }
  },

  computed: {
    dialogShow: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  watch: {
  },
  created() {
    this.getAttachmentType()
    getShopAttachment(this.rowData.id).then(res => {
      this.fileList = res.data
    })
  },
  methods: {
    getFile(data) {
      this.fileList = data
    },
    // 新增附件
    onSuccess(data) {
      this.fileList = [...data, ...this.fileList]
    },
    handleAdd() {
      this.showFileAdd = true
    },
    // 获取附件类型attachmentType下拉选项
    getAttachmentType() {
      postConfigAttachmentTemplate().then(res => {
        if (res.success === 1) {
        // 根据modelId获取每个配置id
          this.attTypeOptions = res.data.records.filter(el => el.enable === 1 && (el.attachmentType === '测绘结果' || el.attachmentType === '复尺结果'))
        }
      })
    },
    // 删除文件
    removeFile(data) {
      this.fileList = data.list
    },
    // 文件上传成功
    uploadSuccessFile(data) {
      this.fileList = data.list
    },
    closeDialog() {
      this.dialogShow = false
      this.clearForm()
    },
    clearForm(done) {
      this.formData = []
      done && done()
    },
    // 提交表单处理
    submitForm() {
      if (this.fileList.length === 0) {
        this.$message.warning('请上传文件')
        return
      }
      saveState({ ...this.rowData, shopAttachmentDTOList: this.fileList }).then(res => {
        if (res.success) {
          this.$message.success('操作成功')
          this.$emit('success')
          this.closeDialog()
        }
      })
    }
  }
}
</script>
<style lang='scss' scoped>
.img-upload-container {
  width: fit-content;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  .icon-msg{
    margin-left: 10px;
    color: #999;
  }
}
</style>
